<template>
    <div style="background: #fff; width: 100%; height: 100%">
        <div>
            <div class="QueryList">
                <div class="QueryItem">
                    用户名：
                    <el-input placeholder="请输入内容" v-model="QueryInfo.userName" clearable> </el-input>
                </div>
                <div class="QueryItem">
                    手机号：
                    <el-input placeholder="请输入内容" v-model="QueryInfo.phone" clearable> </el-input>
                </div>
                <div class="QueryItem">
                    账号状态：
                    <el-select v-model="QueryInfo.accountStatus" placeholder="请选择">
                        <el-option v-for="(item, index) in NumberStatusList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="QueryItem">
                    接单数量：
                    <el-select v-model="QueryInfo.orderReceiveNum" placeholder="请选择">
                        <el-option v-for="(item, index) in OrderNumberList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="QueryList">
                <!-- <div class="QueryItem">
                    注册方式：
                    <el-select v-model="QueryInfo.registerType" placeholder="请选择">
                        <el-option v-for="(item, index) in NumberTypeList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <!-- <div class="QueryItem">
                    账号等级：
                    <el-select v-model="QueryInfo.accountLevel" placeholder="请选择">
                        <el-option v-for="(item, index) in NumberLeveList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <div class="QueryItem" style="width: 300px">
                    注册时间：
                    <el-date-picker
                        v-model="QueryInfo.registerTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </div>
                <div class="QueryItem">
                    <div style="margin-right: 15px">
                        <el-button type="primary" @click="getList(1)">查询</el-button>
                    </div>
                    <div style="margin-right: 15px">
                        <el-button type="danger" @click="clearquery">清空</el-button>
                    </div>
                    <div style="margin-right: 15px">
                        <el-button type="info" @click="exportExcel">导出</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="id" label="用户ID" width="150" style=""> </el-table-column>
                <el-table-column fixed prop="userName" label="用户名"> </el-table-column>
                <el-table-column fixed prop="phone" label="手机号"> </el-table-column>
                <el-table-column fixed prop="registerTime" width="150" label="注册时间">
                    <template slot-scope="scope">
                        <div>{{ getTime(scope.row.registerTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="accountStatus" label="账号状态">
                    <template slot-scope="scope">
                        <div>{{ getaccountStatus(scope.row.accountStatus) }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column fixed prop="registerType" label="注册方式"> </el-table-column>
                <el-table-column fixed prop="accountLevel" label="账号等级"> </el-table-column> -->
                <el-table-column fixed prop="alipayAccount" label="支付宝账号"> </el-table-column>
                <el-table-column fixed prop="alipayName" label="支付宝实名"> </el-table-column>
                <el-table-column fixed prop="orderReceiveNum" label="接单数量">
                    <template slot-scope="scope">
                        <div @click="getOrderInfo(scope.row, 'orderReceiveNum', '接单数量')">{{ scope.row.orderReceiveNum }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="orderFinishNum" label="已完成数量">
                    <template slot-scope="scope">
                        <div @click="getOrderInfo(scope.row, 'orderFinishNum', '已完成数量')">{{ scope.row.orderFinishNum }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="orderDefaultNum" label="违约单数量">
                    <template slot-scope="scope">
                        <!--  @click="getOrderInfo(scope.row, 'orderDefaultNum', '违约单数量')" -->
                        <div>{{ scope.row.orderDefaultNum }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="cashingAmount" label="待提现资金"> </el-table-column>
                <el-table-column fixed prop="cashedAmount" label="已提现资金"> </el-table-column>
                <el-table-column fixed prop="frozenAmount" label="冻结金额"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <div style="display: flex">
                            <el-button @click="handleClick(scope.row)" v-if="scope.row.accountStatus != 'ENABLED'" type="text" size="small"
                                >启用</el-button
                            >
                            <el-button @click="handleClick(scope.row)" style="color: red" v-else type="text" size="small">停用</el-button>

                            <el-button type="text" size="small" @click="setUserInfoDialog(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="payOut(scope.row)">提现</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px; display: flex; justify-content: flex-end">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total_record"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="" v-if="PayoutsDialog" :visible.sync="PayoutsDialog" width="60%">
            <div>
                <div style="display: flex; align-items: center">
                    <div>提现</div>
                    <el-button style="margin-left: 15px" type="primary" @click="GetUserMoneyList(Userinfo)">提现记录</el-button>
                </div>
                <div style="display: flex; align-items: center; margin-top: 20px; margin-bottom: 15px">
                    <div>用户名：{{ Userinfo.userName }}</div>
                    <div style="margin-left: 15px">手机号：{{ Userinfo.phone }}</div>
                </div>
                <div style="margin-bottom: 15px">待提现金额：{{ Userinfo.cashingAmount }}</div>
                <div style="margin-bottom: 15px">已提现金额：{{ Userinfo.cashedAmount }}</div>
                <div style="margin-bottom: 15px">已冻结金额：{{ Userinfo.frozenAmounts || 0 }}</div>

                <div style="display: flex; align-items: center; margin-bottom: 15px">
                    <div style="color: #fff">*</div>
                    <div>冻结金额：</div>
                    <div style="margin-left: 15px">
                        <el-input
                            placeholder="请输入内容"
                            @input="(value) => MoneyChant(value, Userinfo.cashingAmount, 'frozenAmount')"
                            type="number"
                            v-model="Userinfo.frozenAmount"
                            clearable
                        >
                        </el-input>
                    </div>
                </div>
                <div style="display: flex; align-items: center">
                    <div style="color: red">*</div>
                    <div>提现金额：</div>
                    <div style="margin-left: 15px">
                        <el-input
                            placeholder="请输入内容"
                            :max="Userinfo.cashingAmount - Userinfo.frozenAmount"
                            @input="(value) => MoneyChant(value, Userinfo.cashingAmount - Userinfo.frozenAmount, 'cashAmount')"
                            type="number"
                            v-model="Userinfo.cashAmount"
                            clearable
                        >
                        </el-input>
                    </div>
                    <div style="margin-left: 10px">可提现金额:{{ Userinfo.cashingAmount - Userinfo.frozenAmount }}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="PayoutsDialog = false">取 消</el-button>
                <el-button type="primary" @click="cash">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="用户编辑" :visible.sync="setUserDialog" width="60%">
            <div style="margin-bottom: 20px">用户编辑</div>
            <div>
                <div style="display: flex; align-items: center; margin-bottom: 15px">
                    <div style="color: red">*</div>
                    <div style="width: 120px">用户名：</div>
                    <div style="margin-left: 15px">
                        <el-input placeholder="请输入内容" v-model="setUserinfo.userName" clearable> </el-input>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px">
                    <div style="color: red">*</div>
                    <div style="width: 120px">手机号：</div>
                    <div style="margin-left: 15px">
                        <el-input placeholder="请输入内容" v-model="setUserinfo.phone" clearable> </el-input>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px">
                    <div style="color: red">*</div>
                    <div style="width: 120px">密码：</div>
                    <div style="margin-left: 15px">
                        <el-input placeholder="请输入内容" v-model="setUserinfo.pwd" clearable> </el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setUserDialog = false">取 消</el-button>
                <el-button type="primary" @click="setUser">确 定</el-button>
            </span>
        </el-dialog>
        <batchGeneration ref="batchGeneration">
            <div style="display: flex; align-items: center; margin-top: 20px; margin-bottom: 15px">
                <div>用户名：{{ Userinfo.userName }}</div>
                <div style="margin-left: 15px">手机号：{{ Userinfo.phone }}</div>
            </div>
        </batchGeneration>
        <orderdialog ref="orderdialog"> </orderdialog>
    </div>
</template>

<script>
import { getListTime } from '@/utils/Time';
import batchGeneration from './component/dialog.vue';
import orderdialog from './component/orderdialog.vue';
import request from '@/utils/request';
export default {
    methods: {
        clearquery() {
            const obj = Object.keys(this.QueryInfo);
            obj.forEach((item) => {
                this.QueryInfo[item] = '';
            });
        },
        exportExcel() {
            const obj = {};
            const querylist = Object.keys(this.QueryInfo);
            for (let i = 0; i < querylist.length; i++) {
                if (this.QueryInfo[querylist[i]]) {
                    if (querylist[i] == 'orderAmount') {
                        if (this.QueryInfo[querylist[i]].start && this.QueryInfo[querylist[i]].end) {
                            obj[querylist[i]] = this.QueryInfo[querylist[i]];
                        }
                    } else {
                        obj[querylist[i]] = this.QueryInfo[querylist[i]];
                    }
                }
            }
            console.log(obj);
            request({
                url: `/admin/user/v1/list-export`,
                method: 'post',
                data: obj,
                responseType: 'blob'
            }).then((res) => {
                console.log(res);
                let url = window.URL.createObjectURL(res);
                // 文件名
                let fileName = '用户列表';
                const a = document.createElement('a');
                a.setAttribute('href', url);
                a.setAttribute('download', fileName);
                document.body.append(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        handleClick(row) {
            console.log(row);
            this.$store
                .dispatch('userList/Enable', {
                    accountStatus: row.accountStatus == 'ENABLED' ? 'DISABLED' : 'ENABLED',
                    id: row.id
                })
                .then((res) => {
                    this.getList();
                    this.$message.success('操作成功');
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        handleSizeChange(e) {
            console.log(e);
            this.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getList();
        },
        getList(number) {
            if ((number = 1)) {
                this.pageNum = 1;
            }
            const obj = {};
            const queryListItem = Object.keys(this.QueryInfo);
            for (let i = 0; i < queryListItem.length; i++) {
                if (this.QueryInfo[queryListItem[i]]) {
                    obj[queryListItem[i]] = this.QueryInfo[queryListItem[i]];
                }
            }
            console.log(obj);
            this.$store
                .dispatch('userList/list', {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    ...obj
                })
                .then((res) => {
                    console.log(res);
                    this.tableData = res.data.current_data;
                    this.total_record = res.data.total_record;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getTime(e) {
            return getListTime(e);
        },
        getaccountStatus(e) {
            switch (e) {
                case 'ENABLED':
                    return '启用';
                default:
                    return '停用';
            }
        },
        payOut(e) {
            console.log(e);
            this.Userinfo = JSON.parse(JSON.stringify(e));
            this.Userinfo.frozenAmounts = this.Userinfo.frozenAmount;

            this.Userinfo.frozenAmount = null;
            this.PayoutsDialog = true;
        },
        cash() {
            this.$store
                .dispatch('userList/cash', {
                    ...this.Userinfo
                })
                .then((res) => {
                    console.log(res);
                    this.PayoutsDialog = false;
                    this.getList();
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        setUserInfoDialog(e) {
            this.setUserinfo = e;
            this.setUserDialog = true;
        },
        setUser() {
            this.$store
                .dispatch('userList/edit', {
                    ...this.setUserinfo
                })
                .then((res) => {
                    console.log(res);
                    this.setUserDialog = false;
                    this.getList();
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        GetUserMoneyList(item) {
            this.$refs.batchGeneration.getlist(item);
        },
        getOrderInfo(item, name, title) {
            console.log(item);
            this.$refs.orderdialog.getlist(item, name, title);
        },
        MoneyChant(value, e, name) {
            if (value > e) {
                this.Userinfo[name] = e;
            }
        }
    },

    data() {
        return {
            tableData: [],
            QueryInfo: {
                userName: '',
                phone: '',
                accountStatus: '',
                orderReceiveNum: '',
                registerType: '',
                accountLevel: '',
                registerTime: null
            },
            NumberStatusList: [
                {
                    value: 'DISABLED',
                    label: '停用'
                },
                {
                    value: 'ENABLED',
                    label: '启用'
                }
            ],
            OrderNumberList: [
                {
                    value: null,
                    label: '全部'
                },
                {
                    value: 'asc',
                    label: '正序'
                },
                {
                    value: 'desc',
                    label: '倒叙'
                }
            ],
            NumberTypeList: [
                {
                    value: '授权码兑换注册',
                    label: '授权码兑换注册'
                },
                {
                    value: '注册',
                    label: '注册'
                }
            ],
            NumberLeveList: [
                {
                    value: '授权码级别',
                    label: '授权码级别'
                },
                {
                    value: '一级',
                    label: '一级'
                },
                {
                    value: '二级',
                    label: '二级'
                },
                {
                    value: '三级',
                    label: '三级'
                }
            ],
            total_record: 0,
            pageSize: 10,
            pageNum: 1,
            PayoutsDialog: false,
            Userinfo: {},
            setUserDialog: false,
            setUserinfo: {},
            showmoney: false
        };
    },
    mounted() {
        this.getList();
    },
    components: {
        batchGeneration,
        orderdialog
    }
};
</script>
<style>
/* .el-dialog__header {
    display: none;
} */
</style>
<style scoped>
.QueryList {
    display: flex;
    padding-left: 30px;
}

.QueryItem {
    display: flex;
    height: 80px;
    width: 260px;
    align-items: center;
    white-space: nowrap;
    margin-right: 25px;
}
</style>